import React, {useState, useEffect} from 'react';
import {
  StyleSheet,
  Text,
  View,
  StatusBar,
  FlatList,
  ImageBackground,
  TouchableWithoutFeedback,
} from 'react-native';
import IconButton from '../../../components/IconButton';
import Avatar from '../../../components/avatar';

let loding = false;

function Item({navigation}) {
  return (
    <View style={{flex: 1, borderWidth: 2, borderColor: '#000'}}>
      <TouchableWithoutFeedback
        onPress={() => {
          navigation.navigate('DetilPage');
        }}>
        <ImageBackground
          style={{
            height: 300,
          }}
          source={{
            uri:
              'https://img30.360buyimg.com/babel/s290x370_jfs/t1/114712/28/3823/146782/5ea98f7aEe50f8a3e/ce9ac38311d7da75.jpg!cc_290x370.webp',
          }}>
          <View
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              position: 'absolute',
              bottom: 0,
              paddingLeft: 5,
              paddingRight: 5,
            }}>
            <IconButton name="enviromento" size={25} color="#fff" />
            <Text style={{color: '#fff', flex: 1}}>0.5km</Text>
            <Avatar uri="https://i03piccdn.sogoucdn.com/67eaa7e78086ac3a" />
          </View>
        </ImageBackground>
      </TouchableWithoutFeedback>
      <Text
        style={{backgroundColor: '#000', color: '#fff', textAlign: 'center'}}>
        品质家具，满300减30
      </Text>
    </View>
  );
}

const detil = ({navigation}) => {
  useEffect(() => {
    navigation.setOptions({
      title: '梅州',
    });
  }, []);
  const [data, setdata] = useState([1, 2, 3, 4, 5, 6]);
  const [flag, setflag] = useState(false);
  return (
    <View>
      <StatusBar barStyle="light-content" />
      <FlatList
        data={data}
        numColumns={2}
        renderItem={() => <Item navigation={navigation} />}
        keyExtractor={(item, index) => index.toString()}
        refreshing={flag}
        onRefresh={() => {
          setflag(true);
          setTimeout(() => {
            setdata([1, 2]);
            setflag(false);
          }, 1000);
        }}
        ListFooterComponent={
          <Text
            style={{
              textAlign: 'center',
            }}>
            正在加载...
          </Text>
        }
        onEndReachedThreshold={0.2}
        onEndReached={() => {
          if (loding) return;
          loding = true;
          setTimeout(() => {
            setdata([...data, 7, 8]);
            loding = false;
          }, 1000);
        }}
      />
    </View>
  );
};

export default detil;

const styles = StyleSheet.create({});
